<template>
    <page-container class="hotlive-box" bgColor="#f4f4f4">
        <view slot="header">
            <cu-custom :isBack="true" bgColor="bg-white">
                <block slot="content">直播</block>
            </cu-custom>
            <view class="prl-26 margin-top margin-bottom">
                <search></search>
            </view>
        </view>
        <view slot="center" class="prl-26 hotlive-center">

            <mescroll ref="mescrollRef" @init="mescrollInit" height="calc(100% + 50px)" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
                <hot-broadcast :listArr="hotList" :headerType="false" @liveCall="liveFn" :showyg='false'></hot-broadcast>
            </mescroll>
        </view>
    </page-container>
</template>

<script>
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
import search from '@/livePages/components/search.vue'
import HotBroadcast from '@/livePages/components/hot-broadcast.vue'

export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	name: 'Hotlive',
	data() {
		return {
			mescroll: null,
			downOption: {
				auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: false, // 不自动加载
				noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			},
			hotList: []
		}
	},
	components: {
		search,
		HotBroadcast
	},
	onLoad(e) { },
	onShow(e) { },
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
			console.log('emescroll', e)
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			this.mescroll.resetUpScroll()
		},
		/* 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			this.$request
				.getLiveList({ page: page.num, page_size: 10 })
				.then(res => {
					// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.mescroll.endSuccess(res.data.list.length)
					if (page.num == 1) this.hotList = [] // 如果是第一页需手动制空列表
					let newArr = res.data.list.map(v => {
						v.goods = v.goods.splice(0, 3)
						return v
					})
					this.hotList = this.hotList.concat(newArr)
				})
				.catch(() => {
					// 联网失败, 结束加载
					this.mescroll.endErr()
				})
		},
		// 瀑布流单个点击回调
		flowcallFn(val) {
			console.log('瀑布流单个点击回调', val)
		},
		liveFn(val) {
			if (val.replay_url == null) {
				// #ifdef H5
				let sUserAgent = navigator.userAgent.toLowerCase()
				var isHuawei = sUserAgent.match(/huawei/i) == 'huawei'
				var isHonor = sUserAgent.match(/honor/i) == 'honor'
				if (isHuawei || isHonor) {
					let url = 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/index.html#/xmg/live?live_id=' + val.id
					location.href = url
				} else {

					if (this.env.includes('NativeApp')) {
						this.$sdk.startAudience(val.id)
						return
					}
					this.$util.redirectTo('/livePages/live/live', {
						live_id: val.id
					})
				}
				// #endif
				// #ifdef MP-WEIXIN
				this.$util.redirectTo('/livePages/live/live', {
					live_id: val.id
				})

				// #endif
			} else {

				// #ifdef H5
				if (this.env.includes('NativeApp')) {
					this.$sdk.startAudience(val.id)
					return
				}
				// #endif

				// query:
				this.$util.redirectTo('/livePages/live/replay', {
					live_id: val.id
				})
				// this.$Router.push({
				// 	path: '/livePages/live/replay',
				// 	query: {
				// 		live_id: val.id
				// 	}
				// })
			}
		}
	},
	mounted() { }
}
</script>

<style lang="scss">
/deep/.mescroll-uni {
    height: 100% !important;
}
.hotlive-box {
    .hotlive-center {
        height: 100%;
        background-color: #f5f5f5;
    }
}
.prl-26 {
    padding: 0 26rpx;
}
</style>
